<template>
	<view class="order-detail-page">
		<!--  -->
		<template v-if="orderData.list && orderData.list.length">
			<headerVue @refrash="getOrderList" v-if="productType == 'TCL'" :pageParams="orderData"></headerVue>
			<duanLangHeaderVue @refrash="getOrderList" :orderNo="orderData.params.condition.orderNo"
				v-if="productType == 'DuanLangZhongWen'" :pageParams="orderData"></duanLangHeaderVue>
		</template>
		<template v-if="orderData.list && orderData.list.length != 0">
			<view class="equity-name" v-if="orderData.list && orderData.list.length > 0">
				<view class="" v-if="orderData.list[0].equityType == 1">
					<view class="lijianjin-vip">
						<view class="video-title">
							<image style="width: 32rpx" :src="`${constInfo.srcConst}/sxzz/qy_icon_coupon.png`"
								mode="widthFix"></image>
							<view class="video-name">权益领取</view>
						</view>
					</view>
				</view>
				<view class="" v-if="orderData.list[0].equityType == 2">
					<view class="video-container">
						<view class="video-title">
							<image style="width: 32rpx" :src="`${constInfo.srcConst}/sxzz/iconPlay.png`"
								mode="widthFix"></image>
							<view class="video-name">视频权益</view>
						</view>
						<view class="video-vip">
							<view class="video-vip-icon">
								<image style="width: 92rpx" :src="`${constInfo.srcConst}/sxzz/youKu.png`"
									mode="widthFix"></image>
							</view>
							<view class="video-vip-title">优酷视频会员月卡</view>
							<view class="video-vip-line">
								<up-line length="120rpx" color="#BDD0E3"></up-line>
							</view>
							<view class="video-vip-btn">
								<image style="width: 106rpx" :src="`${constInfo.srcConst}/sxzz/icon_get.png`"
									mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="b-left-money" v-for="item in orderData.list" :key="item">
				<!-- 图片如何判断  -->
				<template v-if="item.redeemStatus == 2">
					<image class="writeOff" :src="`${constInfo.srcConst}/lhhy/tcl/writeOff.png`" style="width: 80rpx"
						mode="widthFix"></image>
				</template>
				<template v-if="item.equityType==1 || item.equityType == 2">
					<template v-if="item.receiveStatus == 1">
						<image :src="`${constInfo.srcConst}/lhhy/tcl/good.png`"
							style="width: 700rpx; margin-left: 25rpx" mode="widthFix"></image>
					</template>
					<template v-if="item.receiveStatus == 2">
						<image :src="`${constInfo.srcConst}/lhhy/tcl/bad.png`" style="width: 700rpx; margin-left: 25rpx"
							mode="widthFix"></image>
					</template>
					<template v-if="item.receiveStatus == 3">
						<image :src="`${constInfo.srcConst}/lhhy/tcl/bad.png`" style="width: 700rpx; margin-left: 25rpx"
							mode="widthFix"></image>
					</template>
					<template v-if="item.receiveStatus == 4">
						<image :src="`${constInfo.srcConst}/lhhy/tcl/good.png`"
							style="width: 700rpx; margin-left: 25rpx" mode="widthFix"></image>
					</template>
				</template>
				<template v-if="item.equityType==4">
					<template v-if="item.receiveStatus == 1">
						<image :src="`${constInfo.srcConst}/lhhy/tcl/oilBg.png`"
							style="width: 700rpx; margin-left: 25rpx" mode="widthFix"></image>
					</template>
					<template v-if="item.receiveStatus == 2">
						<image :src="`${constInfo.srcConst}/lhhy/tcl/bad.png`" style="width: 700rpx; margin-left: 25rpx"
							mode="widthFix"></image>
					</template>
					<template v-if="item.receiveStatus == 3">
						<image :src="`${constInfo.srcConst}/lhhy/tcl/bad.png`" style="width: 700rpx; margin-left: 25rpx"
							mode="widthFix"></image>
					</template>
					<template v-if="item.receiveStatus == 4">
						<image :src="`${constInfo.srcConst}/lhhy/tcl/oilBg.png`"
							style="width: 700rpx; margin-left: 25rpx" mode="widthFix"></image>
					</template>
				</template>



				<!-- <image src="/static/lh/equity/bad.png" style="width: 700rpx; margin-left: 25rpx" mode="widthFix"></image> -->
				<view class="money-content">
					<!-- 四种产品 需要判断 1 立减金 2 虚拟会员 3 停车券 4 加油卷 -->
					<view class="content-left">
						<template v-if="item.equityType == 1">
							<text class="icon">￥</text>
							<text class="num">5</text>
						</template>
						<template v-if="item.equityType == 2">
							<text class="video">视频会员</text>
						</template>
						<template v-if="item.equityType == 4">
							<!-- 加油券 -->
							<view class="oil">
								<image :src="`${constInfo.srcConst}/lhhy/tcl/tuanOil.png`" style="width: 100rpx; "
									mode="widthFix"></image>
							</view>

						</template>
					</view>

					<view class="content-detail">
						<view class="detail-name">{{ item.equityName ? item.equityName : item.portfolioName }}</view>
						<view v-if="item.equityType!=4" class="detail-time">
							有效期{{ item.effectiveTime }}-{{ item.expireTime }}</view>
						<template v-if="item.equityType==4 && item.receiveStatus == 3">
							<view class="oilConpons">
								<up-copy :content="item.receiveValue">
									<text>券码：{{item.receiveValue}}</text>
								</up-copy>
							</view>

						</template>
					</view>
					<!-- receiveStatus 领取状态 1 && 当前时间在有效时间范围内 未领取 有操作  -->
					<!-- receiveStatus 领取状态 1 && 当前时间小于生效时间 未到时间  无操作-->
					<!-- receiveStatus 领取状态 1 && 当前时间大于过期时间   已过期 无操作-->

					<!-- receiveStatus 领取状态 2 &&   领取中 无操作-->
					<!-- receiveStatus 领取状态 3 &&   领取成功 无操作-->
					<!-- receiveStatus 领取状态 4 &&   领取失败 -->
					<view class="right-btn">
						<template v-if="item.equityType==4">
							<view style="height: 80rpx;" v-if="item.receiveStatus != 1"></view>
							<view class="content-btn1" v-if="item.receiveStatus == 1">
								<button @click="getTiket(item)">未领取</button>
							</view>
							<view v-else-if="item.receiveStatus == 2" class="content-load">
								{{ status[item.receiveStatus] }}
							</view>
							<view v-else-if="item.receiveStatus == 3" class="content-success">
								<up-copy :content="item.receiveValue">
									<text style="color: blue;">点击复制</text>
								</up-copy>
							</view>
							<view v-else-if="item.receiveStatus == 4" class="content-error">
								<button @click="getTiket(item)">
									{{ status[item.receiveStatus] }}
								</button>
							</view>
						</template>
						<template v-if="item.equityType!=4">
							<view class="number">{{ parseInt(item.annualPayNum) }} 期</view>
							<view class="content-btn" v-if="item.receiveStatus == 1">
								<template v-if="haveOperate(item) == '未领取'">
									<button class="get-ticket" @click="getTiket(item)">{{ haveOperate(item) }}</button>
								</template>
								<template v-else>
									{{ haveOperate(item) }}
								</template>
							</view>

							<view v-else-if="item.receiveStatus == 2" class="content-load">
								{{ statusEnum[item.receiveStatus] }}
							</view>
							<view v-else-if="item.receiveStatus == 3" class="content-success">
								{{ statusEnum[item.receiveStatus] }}
							</view>
							<view v-else-if="item.receiveStatus == 4" class="content-error">
								<button @click="getTiket(item)" class="get-ticket">
									{{ statusEnum[item.receiveStatus] }}
								</button>
							</view>
						</template>

					</view>
				</view>
			</view>
			<uni-load-more :status="orderData.loadStatus"></uni-load-more>
		</template>
		<template v-else>
			<up-empty mode="coupon" icon="/static/tabs/coupon.png" text="没有权益"></up-empty>
		</template>
		<up-picker :show="orderData.showPicker" @cancel="handleClose" :title="orderData.pickerTitle"
			:columns="orderData.columns" keyName="equityName" @confirm="confirm" @change="changeHandler"></up-picker>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import {
		storeToRefs
	} from 'pinia';
	import dayjs from 'dayjs';
	import initApi from '@/apis/init.js';
	import {
		constStore
	} from '@/store/const.js';
	import {
		useUserStore
	} from '@/store/user.js';

	import loginOrderListVue from './component/loginOrderList.vue';
	import noLoginOrderListVue from './component/noLoginOrderList.vue';

	import headerVue from './header.vue';
	import duanLangHeaderVue from './duanLangHeader.vue';
	//引入防抖函数
	const {
		constInfo
	} = constStore();
	const statusEnum = ['', '未领取', '领取中', '领取成功', '领取失败'];
	const {
		userInfo
	} = useUserStore();
	const orderData = reactive({
		params: {
			pageNum: 1,
			pageSize: 20,
			condition: {
				userId: null,
				orderNo: null
			},
			orders: ['updated_time desc']
		},
		loadStatus: 'loading',
		list: [],
		total: 0,
		showPicker: false,
		pickerTitle: null,
		columns: [],
		equtyId: null
	});
	const productType = ref();
	onLoad((query) => {
		console.log(query, 'orderDetail===>');
		if (query && query.orderNo) {
			orderData.params.condition.orderNo = query.orderNo;
		}
		if (query && query.productType) {
			// 展示可以领取的东西
			productType.value = query.productType;
		}
	});
	onMounted(() => {
		getOrderList();
	});
	/* picker */
	const handleClose = () => {
		orderData.showPicker = false;
	};
	const confirm = (e) => {
		const {
			value
		} = e;
		console.log(value);
		orderData.showPicker = false;
		initApi
			.getReceiveEquity({
				...value[0],
				id: orderData.equtyId
			})
			.then((res) => {
				console.log(res);
				if (res.code == 20000) {
					getOrderList();
					return uni.utils.toast('领取成功');
				} else {
					return uni.utils.toast(res.message);
				}
			})
			.catch((error) => {
				return uni.utils.toast(error.message);
			});
	};
	const changeHandler = (e) => {
		console.log(e, 'change');
	};
	const getTiket = (item) => {
		orderData.equtyId = item.id;
		// 没有数据 就直接领取
		if (!item.equityPortfolioConfigList || item.equityPortfolioConfigList?.length < 1) {
			confirNoList(item);
			return;
		}
		// 弹框
		if (item.equityType == 1) {
			orderData.pickerTitle = '选择银行立减金';
		} else if (item.equityType == 2) {
			orderData.pickerTitle = '选择虚拟会员';
		}
		orderData.showPicker = true;
		orderData.columns.length = 0;
		orderData.columns.push(item.equityPortfolioConfigList);
	};
	const confirNoList = (item) => {
		initApi
			.getReceiveEquity({
				id: orderData.equtyId,
				packageCode: item.packageCode,
				annualPayNum: item.annualPayNum
			})
			.then((res) => {
				console.log(res);
				if (res.code == 20000) {
					getOrderList();
					return uni.utils.toast('领取成功');
				} else {
					return uni.utils.toast(res.message);
				}
			})
			.catch((error) => {
				return uni.utils.toast(error.message);
			});
	};
	/* 获取订单详情 */
	const getOrderList = () => {
		console.log('getOrderList');
		// 获取page
		return initApi
			.getReceiveEquityPage(orderData.params)
			.then((res) => {
				console.log(res);
				if (res.code == 20000) {
					orderData.list = orderData.params.pageNum == 1 ? res.data.records : [...orderData.list, ...res
						.data.records
					];
					orderData.loadStatus = res.data.records.length < orderData.params.pageSize ? 'noMore' : 'more';
				}
			})
			.catch((err) => {
				console.log(e, '分页加载 getOrderList');
				orderData.loadStatus = 'more';
				if (orderData.params.pageNum > 1) {
					orderData.params.pageNum = orderData.params.pageNum - 1;
				}
			});
	};
	/* 触底加载 */
	onReachBottom(() => {
		console.log('触底加载');
		handleLoadMore();
	});
	/* 下拉刷新 */
	onPullDownRefresh(() => {
		console.log('下拉刷新');
		// 开始

		// 结束
		refresh();
	});
	const handleLoadMore = () => {
		if (orderData.loadStatus != 'more') {
			return;
		}
		orderData.params.pageNum = orderData.params.pageNum + 1;
		getOrderList();
	};
	const refresh = () => {
		orderData.params.pageNum = 1;
		getOrderList().finally(() => {
			uni.stopPullDownRefresh();
		});
	};

	const haveOperate = (item) => {
		/* receiveStatus 领取状态 1 && 当前时间在有效时间范围内 未领取 有操作  
			 receiveStatus 领取状态 1 && 当前时间 早于 生效时间 未到时间  无操作 effectiveTime
			 receiveStatus 领取状态 1 && 当前时间大于过期时间   已过期 无操作 expireTime  */

		const time1 = item.effectiveTime; // 8yue
		const time2 = item.expireTime; // 9yue
		const nowTime = dayjs(new Date()).format('YYYY-MM-DD HH:ss:mm');
		const dayjsTime1 = dayjs(time1);
		const dayjsTime2 = dayjs(time2);
		const dayjsTime3 = dayjs(nowTime);
		if (dayjsTime3.isBefore(dayjsTime1)) {
			return '未到时间';
		} else if (dayjsTime3.isAfter(dayjsTime2)) {
			return '已过期';
		} else if (dayjsTime3.isAfter(dayjsTime1) && dayjsTime3.isBefore(dayjsTime2)) {
			return '未领取';
		} else {
			return '错误时间';
		}
	};
</script>

<style lang="scss" scoped>
	.order-detail-page {
		.lijianjin-vip {
			margin-left: 54rpx;

			.video-title {
				display: flex;
				align-items: center;
				height: 90rpx;
				line-height: 90rpx;

				.video-name {
					margin-left: 10rpx;
					font-family: MiSans, MiSans;
					font-weight: 400;
					font-size: 30rpx;
					color: #03111f;
				}
			}
		}

		.video-container {
			margin-left: 54rpx;

			.video-title {
				display: flex;
				align-items: center;
				height: 90rpx;
				line-height: 90rpx;

				.video-name {
					margin-left: 10rpx;
					font-family: MiSans, MiSans;
					font-weight: 400;
					font-size: 30rpx;
					color: #03111f;
				}
			}

			.video-vip {
				width: 200rpx;
				height: 220rpx;
				background: #ffffff;
				box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.1);
				border-radius: 24rpx 24rpx 24rpx 24rpx;

				.video-vip-icon {
					display: flex;
					justify-content: center;
				}

				.video-vip-title {
					font-size: 20rpx;
					text-align: center;
				}

				.video-vip-line {
					display: flex;
					justify-content: center;
					margin: 24rpx 0;
				}

				.video-vip-btn {
					display: flex;
					justify-content: center;
				}
			}
		}
	}

	.b-left-money {
		position: relative;
		margin-top: 10rpx;
		height: 146rpx;

		.writeOff {
			position: absolute;
			left: 35rpx;
			z-index: 100;
			top: 20rpx;
		}

		.money-content {
			.right-btn {
				width: 200rpx;

				.number {
					text-align: center;
					// background-color: red;
					// display: flex;

					margin-top: 10rpx;
					margin-bottom: 20rpx;
				}

				.content-btn1 {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 20rpx;
					height: 146rpx;

					button {
						width: 150rpx;
						height: 60rpx;
						text-align: center;
						line-height: 60rpx;
						font-size: 20rpx;
						background-color: #6082ce;
						border-radius: 100rpx;
						color: #fff;
					}
				}

				.content-btn {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 20rpx;

					button {
						width: 150rpx;
						height: 60rpx;
						text-align: center;
						line-height: 60rpx;
						font-size: 20rpx;
						background-color: #6082ce;
						border-radius: 100rpx;
						color: #fff;
					}
				}

				.content-load {
					color: #71d5a1;
					font-size: 20rpx;
					width: 200rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.content-success {
					color: #19be6b;
					font-size: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.content-error {
					color: #dd6161;
					display: flex;
					justify-content: center;
					align-items: center;

					button {
						font-size: 20rpx;
						border-radius: 100rpx;
						background-color: #6082ce;
						border-radius: 100rpx;
						width: 150rpx;
						height: 60rpx;
						text-align: center;
						line-height: 60rpx;
					}
				}
			}

			.content-left {
				width: 210rpx;
				text-align: center;
				line-height: 146rpx;

				.oil {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 146rpx;
				}

				.icon {
					color: #fff;
				}

				.num {
					font-size: 70rpx;
					color: #fff;
					font-weight: 600;
				}

				.video {
					font-size: 30rpx;
					color: #fff;
					font-weight: 600;
				}
			}

			.content-detail {
				width: 350rpx;
				font-size: 20rpx;
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.oilConpons {
					font-size: 22rpx;
					font-weight: 600;
				}

				.detail-name {
					font-size: 22rpx;
					font-weight: 600;
				}

				.detail-time {
					font-size: 12rpx;
				}

				view {
					line-height: 40rpx;
				}
			}

			position: absolute;
			top: 0;
			width: 700rpx;
			height: 146rpx;
			left: 25rpx;
			display: flex;
		}
	}
</style>